<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link href="css/style.css" rel='stylesheet' type='text/css'/>
    <title>登录</title>
</head>
<body>
<!-----start-main---->
<div class="main">
    <div class="login-form">
        <h1>Member Login</h1>
        <div class="head">
            <!-- 登入头像 -->
            <img src="images/user.png" alt=""/>
        </div>
        <form id="container">
            <input type="text" class="text" placeholder="请输入用户名" v-model="username">
            <input type="password" placeholder="请输入密码" v-model="password">

            <div class="submit">
                <input type="button" value="登入" v-on:click="login()">
            </div>
            <div class="button">
                <input type="button" value="注册">
            </div>
        </form>

    </div>

</div>
<!-----//end-main---->
</body>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/common.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>

<script>
    var app = new Vue({
        el:"#container",
        data:{
            username:'',
            password:''
        },
        methods:{
            login:function () {
                axios.post('http://localhost:8080/Hotel_Project/user/doLogin',{
                    account:this.username,
                    password:this.password
                }).then(function (response) {
                    console.log(response);
                    if(response.data.code != 200){
                        return;
                    }
                    layer.msg(response.data.msg,{icon:1,time:1000},function () {
                         location.href = "success.html"
                    })

                }).catch(function (error) {

                })
            }
        }
    })
</script>

</html>